<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ExportButtons</title>
    <link href="../dist/css/tableexport.min.css" rel="stylesheet">
    <link href="./examples.css" rel="stylesheet">
</head>
<body>
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-TL44T9" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<a id="example-link" href="./"> << Examples</a>

<iframe src="./defaults.html" frameborder="0" width="100%" scrolling="no" onload="this.height=screen.height/2.5;"></iframe>

<main>
    <h1>ExportButtons
        <code class="small">exportButtons: false</code>
    </h1>


    <div>
        <button id="customXLSButton">I am a BIG custom XLS button</button>
    </div>
    <br>
    <div>
        <button id="customCSVButton">I am a SMALL custom CSV button</button>
    </div>
    <br>

    <table id="export-buttons-table">
        <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Thor Walton</td>
            <td>Regional Director</td>
            <td>45</td>
            <td>$98,540</td>
        </tr>
        <tr>
            <td>Travis Clarke</td>
            <td>Software Engineer</td>
            <td>30</td>
            <td>$275,000</td>
        </tr>
        <tr>
            <td>Suki Burks</td>
            <td>Office Manager</td>
            <td>22</td>
            <td>$67,670</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td class="disabled"></td>
            <td class="disabled"></td>
            <td class="disabled"></td>
            <th>$441,210</th>
        </tr>
        </tfoot>
    </table>

    <br>

    <div class="info">
        Your own custom export button can be easily created by simply capturing the <i>TableExport</i> instance.
        <ol>
            <li>First, save the TableExport <b>instance</b> to a variable.</li>
            <li>Second, call <code>getExportData()</code> on the instance from <b>step 1</b>. The return value will be
                an object literal with keys corresponding to the table selector(s) <code>id</code> attribute (or a
                unique <i>uuid</i> generated by TableExport if an <code>id</code> is not provided).
            </li>
            <li>Lastly, call <code>export2file(data, mimeType, filename, fileExtension)</code>. The arguments correspond
                to the keys of the Object returned from <b>step 2</b> above.
            </li>
        </ol>
        First, in a variable
    </div>

    <br>

    <div class="info code">
<pre>
var ExportButtons = document.getElementById('export-buttons-table');

var instance = new TableExport(ExportButtons, {
    formats: ['xls'],
    exportButtons: false
});

//                                        // "id" of selector    // format
var exportData = instance.getExportData()['export-buttons-table']['xls'];

var XLSbutton = document.getElementById('customXLSButton');

XLSbutton.addEventListener('click', function (e) {
    //                   // data          // mime              // name              // extension
    instance.export2file(exportData.data, exportData.mimeType, exportData.filename, exportData.fileExtension);
});
</pre>
    </div>

    <br>

    <div class="info">Additionally, the raw binary data (and byte length) can be retrieved using the <code>getBinaryData</code> prototype method.
    <div class="info code nested">
<pre>
// get raw binary data (i.e. filesize)
var bytes = TableExport.prototype.getBinaryData(exportData.data, exportData.fileExtension);
var byteLength = bytes.byteLength;
</pre>
    </div>
    </div>


</main>

<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/js-xlsx/dist/xlsx.core.min.js"></script>
<script type="text/javascript" src="../bower_components/blobjs/Blob.min.js"></script>
<script type="text/javascript" src="../bower_components/file-saverjs/FileSaver.min.js"></script>
<script type="text/javascript" src="../dist/js/tableexport.min.js"></script>
<script type="text/javascript" src="../assets/js/analytics.js"></script>
<script>

    var tableId = 'export-buttons-table';
    var ExportButtons = document.getElementById(tableId);

    var instance = new TableExport(ExportButtons, {
        formats: ['xls', 'csv'],
        exportButtons: false
    });
    // **** jQuery **************************
    //    $(ExportButtons).tableExport({
    //        formats: ['xls'],
    //        exportButtons: false
    //    });
    // **************************************

    var XLS = instance.CONSTANTS.FORMAT.XLS;
    var CSV = instance.CONSTANTS.FORMAT.CSV;

    //                                          // "id"  // format
    var exportDataXLS = instance.getExportData()[tableId][XLS];
    var exportDataCSV = instance.getExportData()[tableId][CSV];

    // get filesize
    var bytesXLS = instance.getFileSize(exportDataXLS.data, exportDataXLS.fileExtension);
    var bytesCSV = instance.getFileSize(exportDataCSV.data, exportDataCSV.fileExtension);

    console.log('filesize (XLS):', bytesXLS + 'B');
    console.log('filesize (CSV):', bytesCSV + 'B');

    var XLSbutton = document.getElementById('customXLSButton');
    XLSbutton.addEventListener('click', function (e) {
        //                   // data             // mime                 // name                 // extension
        instance.export2file(exportDataXLS.data, exportDataXLS.mimeType, exportDataXLS.filename, exportDataXLS.fileExtension);
    });

    var CSVbutton = document.getElementById('customCSVButton');
    CSVbutton.addEventListener('click', function (e) {
        //                   // data             // mime                 // name                 // extension
        instance.export2file(exportDataCSV.data, exportDataCSV.mimeType, exportDataCSV.filename, exportDataCSV.fileExtension);
    });

</script>

</body>
</html>
